<template>
  <!--  {# 博客文章 #}-->
  <div id="article">
    <div class="head">
      <h2>博客文章</h2>
    </div>
    <div class="body">
      <ul>
        <li v-for="(item,index) in ArticleAll.article_info" :key="item.nid" @click="toarticle(item.nid)">
          <div class="li-left">
            <img alt="" :src="'/api'+item.cover_url">
          </div>
          <div class="li-right">
            <div class="title">
              <h2>
                {{ item.title }}
              </h2>
            </div>
            <div class="content">
              <p>{{ item.abstract }}</p>
            </div>
            <div class="bottom">
              <span>
                  <img src="./image/creationTime.svg" alt="创建时间">{{ item.create_date }}
              </span>
              <span>
                 <img src="./image/like.svg" alt="点赞数">{{ item.look_count }}
              </span>
              <span>
                <img src="./image/browse.svg" alt="浏览数">{{ item.digg_count }}
              </span>
              <span>
                  <img src="./image/comment.svg" alt="评论数">{{ item.comment_count }}
              </span>
              <span>
                  <img src="./image/collect.svg" alt="收藏数">{{ item.collects_count }}
              </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "Article",
  methods: {

    // 跳转到文章详情页
    toarticle(id) {
      this.$router.push({
        name: 'article',
        params: {
          id
        }
      })
    }
  },

  computed: {
    ...mapState('Home', ['ArticleAll'])
  }
}
</script>

<style scoped lang="less">
/*博客文章区域*/
#article {
  min-height: 400px;

  .head {
    background-color: white;
    padding: 15px 20px;
  }

  .body {
    position: relative;
    padding: 0;

    li {
      width: 100%;
      height: 110px;
      margin-bottom: 20px;
      background-color: white;
      padding-top: 10px;
      display: flex;

      .li-left {
        height: 90%;
        width: 30%;
        padding: 5px 10px 10px 10px;

        img {
          height: 100%;
          width: 90%;
        }
      }

      .li-right {
        height: 100%;
        width: 70%;
        align-content: space-around;
        line-height: 25px;

        .title {
          h2 {
            font-size: 21px;
            color: black;
            cursor: pointer;
          }
        }

        .content {
          height: 50px;

          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .bottom {
          display: flex;

          span {
            padding-right: 5px;
            display: flex;
            align-items: center;

            img {
              margin-right: 5px;
              height: 15px;
            }

            &:nth-child(1) {
              padding-right: 25px;
            }
          }
        }
      }
    }
  }
}
</style>